<template>
	<view class="h-full">
		<view class="boxSty">
			<!-- <div style="height: 50rpx;"></div> -->
			<div>
				<image
					:src="IMAGE_URL + (allDetailInfo.images && allDetailInfo.images.length > 0 && allDetailInfo.images[0])"
					mode="aspectFill"
					class="w-full"
					style="position: relative;z-index: 2;"
				>
				</image>
				<div style="position: absolute;z-index: 5;top: 50rpx;" class="flex between w-full">
					<div class="back center" @click="back"> 
						<image src="../../../../static/icon/back.png" mode="" class="w-20 h-30"></image>
					</div>
					<div class="flex-start operateBox">
						<view class="operateBg" @click="goToZan">
							<image v-if="zanFlag" src="../../../../static/icon/thumbs-uped.png" mode="" class="w-40 h-35"></image>
							<image v-else src="../../../../static/icon/thumbs-up.png" mode="" class="w-40 h-35"></image>
						</view>
						<view class="operateBg ml-25" @click="getGuanZhuCollect">
							<image v-if="collectFlag" src="../../../../static/icon/collected.png" mode="" class="w-40 h-35"></image>
							<image v-else src="../../../../static/icon/collect.png" mode="" class="w-40 h-35"></image>
						</view>
					</div>
				</div>
			</div>
			
		</view>
		<view class="bg-white pl-34 pr-34 w-full rounded-20" style="margin-top: -30rpx;position: relative;z-index: 10;">
			 <view class="between">
				 <view class="flex">
				
					<image :src="IMAGE_URL + get(allDetailInfo, 'user.avatar')" mode="widthFix" class="w-90 h-90 mt-40"></image>
					<view class=" mt-40 ml-22">
						<span class="fz34 font-bold" style="color: #262728;">{{get(allDetailInfo, 'user.username')}}</span>
						<image src="../../../../static/card/zh.png" mode="" class="w-35 h-25 ml-10"></image>
						<view class="busiBox">
							<image src="../../../../static/images/user/newUI/whiteColdImg.png" mode="" class="w-full h-full"></image>
							<image src="../../../../static/images/user/newUI/whiteGoldIcon.png" mode="" class="w-25 h-25 iconSty"></image>
						</view>
					</view>
				 </view>
				 <view class="" @click="getGuanZhu">
					 <view v-if="attentionFlag" class="followBox">
						<p class="pl-30 pr-30">√ 已关注</p>	
					 </view>
					 <view v-else class="followBox">
						<p class="pl-30 pr-30">+ 关注</p>	
					 </view>
				 </view>
			 </view>
			 <view class="center mt-45 pb-40">
			 	<view class="callPhoneSty" @click="callPhone">
			 		打电话
			 	</view>
				<view class="inlineBox ml-30">
					在线聊
				</view>
			 </view>
			 <view v-if="allDetailInfo.is_pay_score == 0" class="coverSty">
				<view class="coverContent" @click="scoreModal = true">
					支付100积分查看联系方式
				</view>
			 </view>
		</view>
		<view class=" bg-white pl-34 pr-34 mt-20 pb-40" style="border-radius: 26rpx 26rpx 0 0 ;">
			<view class="flex-start pt-45">
				<view class="" v-for="(item ,index) in infoTitle" class="ml-50 commonTitle" :class="{activeTitle: current == index}" @click="changeTitle(index)">
					{{item}}
				</view>
			</view>
			<view v-if="current == 0" class="">
				<p class="text-010 fz30 mt-40 font-bold">{{ allDetailInfo.person_name }}</p>
				<p class="fz28 text-333 mt-24">{{ allDetailInfo.con }}</p>
			</view>
			<view v-if="current == 1" class="">
				<view class="mt-30" v-for="item in (allDetailInfo.price_image && allDetailInfo.price_image.split(','))">
					<image :src="IMAGE_URL + item" mode="widthFix" class="w-200"></image>
				</view>
				
				<!-- <p class="fz28 text-333 mt-24" style="background-color: #F7F7F7;min-height: 300rpx;">{{  }}</p> -->
			</view>
			<view v-if="current == 2" class="line-h50">
				<p class="fz24 text-333 mt-24">{{ allDetailInfo.skill }}</p>
			</view>
			<view v-if="current == 3" class="mt-20 pb-50">
				<view class="ml-24 mr-24 flex-start mt-50" v-for="item in commontList">
					<!-- 一级 -->
					<image :src="IMAGE_URL + get(item, 'member.avatar')" mode="widthFix" class="w-65"></image>
					<view class="ml-24">
						<!-- 一级 -->
						<span  class="fz24" style="color: #ADADAD;">{{get(item, 'member.username')}}</span>
						<p class="fz24 text-333 mt-15">{{item.content}}</p>
						<view class="mt-15">
							<span class="fz20" style="color: #ADADAD;">{{item.add_time}}</span>
							<span class="fz20 ml-20" style="color: #ADADAD;" @click="replaySec(item, 2, '')">回复</span>
										<span class="fz20 ml-20" style="color: #ADADAD;" @click="delReply(item)">删除</span>
						</view>
						<!-- 二级 -->
						<view class="mt-20" v-for="itemSecond in item.comment">
							<view class=" flex-start">
								<image :src="IMAGE_URL + get(itemSecond, 'member.avatar')" mode="widthFix" class="w-40 vam"></image>
								<view class="ml-24">
									<span  class="fz24" style="color: #ADADAD;">{{get(itemSecond, 'member.username')}}</span>
									<p class="fz24 text-333 mt-15">{{itemSecond.content}}</p>
									<view class="mt-15">
										<span class="fz20" style="color: #ADADAD;">{{itemSecond.add_time}}</span>
										<span class="fz20 ml-20" style="color: #ADADAD;" @click="replaySec(itemSecond, 3, item.id)">回复</span>
										<span class="fz20 ml-20" style="color: #ADADAD;" @click="delReply(itemSecond)">删除</span>
									</view>
								</view>
							</view>
							<!-- 三级 和二级摆放在同一级 -->
							<view class="mt-20 flex-start" v-for="itemThird in itemSecond.comment">
								<image :src="IMAGE_URL + get(itemThird, 'member.avatar')" mode="widthFix" class="w-40 vam"></image>
								<view class="ml-24">
									<span  class="fz24" style="color: #ADADAD;">{{get(itemThird, 'member.username')}}</span>
									<p class="fz24 text-333 mt-15">{{itemThird.content}}</p>
									<view class="mt-15">
										<span class="fz20" style="color: #ADADAD;">{{itemThird.add_time}}</span>
										<span class="fz20 ml-20" style="color: #ADADAD;" @click="replaySec(itemThird, 3, itemSecond.id)">回复</span>
										<span class="fz20 ml-20" style="color: #ADADAD;" @click="delReply(itemThird)">删除</span>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<div v-if="nomore" class="center text-gray-500 fz24 pt-20 pb-20">没有更多了</div>
			</view>
		</view> 
		<u-modal class="modalSty" v-model="showTel" :content="content" :showCancelButton="true" @cancel="showTel = false" @confirm="confirmTel"></u-modal>
		<u-modal class="modalSty" v-model="scoreModal" content="是否确认支付？" :showCancelButton="true" @cancel="scoreModal = false" @confirm="payScore"></u-modal>
		<view v-if="replayFlag" class="replaySty">
			<p class="ml-20" @click="replayFlag = false">❌</p>
			<p class="ml-20">回复：{{replayUser}}</p>
			
		</view>
		<view class="footer_btn4">
			
			<u-input
				v-model="valueComment"
				type="text" :border="false"
				:height="60" :auto-height="true"
				class="inputSty"
				placeholder="真实发声,言之有物"
				@confirm="sendComment(valueComment)"
			/>
			<view class="ml-20">
				<image src="../../../../static/icon/goodIcon.png" mode="widthFix" class="w-45 vam"></image>
				<span class="fz24 text-3b3 ml-5">{{allDetailInfo.zan}}</span>
			</view>
			<view class="ml-20">
				<image src="../../../../static/icon/collectIcon.png" mode="widthFix" class="w-45 vam"></image>
				<span class="fz24 text-3b3 ml-5">1325</span>
			</view>
			<view class="ml-20 mr-20">
				<image src="../../../../static/icon/commentIcon.png" mode="widthFix" class="w-45 vam"></image>
				<span class="fz24 text-3b3 ml-5">{{allDetailInfo.comment}}</span>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { getProfessionalDetail, payScore, lookatZan, operateZan, getGuanZhu, getIsGuanZhu, userGroup, watchComment, delComment, sendComment } from '@/api/user'
	export default {
		data() {
			return {
				productFlag: true,
				scoreModal: false,
				zanFlag: false,
				collectFlag: false,
				attentionFlag: false,  
				allInfo: {},
				valueComment: '',
				replayFlag:false,
				typeKey: '',
				itemInfo: {},
				replayUser: '',
				allDetailInfo: {},
				commontList: [],
				current: 0,
				content: '',
				groupId: '',
				topId: '',
				showTel: false,
				nomore: false,
				IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
				infoTitle: ['服务内容', '价格表单', '服务保障', '用户评论']
			}
		},
		onLoad(options) {
			this.allInfo = JSON.parse(options.item)
			console.log('88999', this.allInfo)
		  },
		  mounted() {
			this.getDetail()  
		  },
		methods: {
			back() {
				uni.navigateBack()
			},
			userGroup() {
				this.$u.api.user.userGroup({
					user_id: uni.getStorageSync("user_id"),
					type: 1,
				}).then(res => {
					res.map(item => {
						if(item.title == '未分组') {
							this.groupId = item.id
						}
					})
				})
			},
			// 查看是否关注和收藏
			getIsGuanZhu() {
				// 查看是否关注
				this.$u.api.user.getIsGuanZhu({
					user_id: uni.getStorageSync("user_id"),
					guanzhu_id: this.allDetailInfo.user_id,
					type: 1,
					release_type: 'user'
				}).then(res => {
					if(res == 1) {
						this.attentionFlag = false
					} else {
						this.attentionFlag = true
					}
				})
				// 查看是否收藏
				this.$u.api.user.getIsGuanZhu({
					user_id: uni.getStorageSync("user_id"),
					guanzhu_id: this.allDetailInfo.id,
					type: 2,
					release_type: 'professional'
				}).then(res => {
					if(res == 1) {
						this.collectFlag = false
					} else {
						this.collectFlag = true
					}
				})
			},
			// 关注操作
			getGuanZhu() {
				this.$u.api.user.getGuanZhu({
					user_id: uni.getStorageSync("user_id"),
					guanzhu_id: this.allDetailInfo.user_id,
					type: 1,
					release_type: 'user',
					group_id: this.groupId
				}).then(res => {
					this.getIsGuanZhu()
				})
			},
			// 收藏操作
			getGuanZhuCollect() {
				this.$u.api.user.getGuanZhu({
					user_id: uni.getStorageSync("user_id"),
					guanzhu_id: this.allDetailInfo.id,
					type: 2,
					release_type: 'professional',
					group_id: this.groupId
				}).then(res => {
					this.getIsGuanZhu()
				})
			},
			// 查看是否点赞
 			lookatZan() {
				this.$u.api.user.lookatZan({
					user_id: uni.getStorageSync("user_id"),
					zan_id: this.allDetailInfo.id,
					type: 2,
					release_type: 'professional'
				}).then(res => {
					if(res == 400) {
						this.zanFlag = false
					} else {
						this.zanFlag = true
					}
				})
			},
			// 进行点赞
			goToZan() {
				this.$u.api.user.operateZan({
					user_id: uni.getStorageSync("user_id"),
					zan_id: this.allDetailInfo.id,
					type: 2,
					release_type: 'professional'
				}).then(res => {
					if(res == 200) {
						this.lookatZan()
					}
				})
			},
			payScore() {
				uni.showLoading({
					title: '支付中'
				});
				this.$u.api.user.payScore({
					user_id: uni.getStorageSync("user_id"),
					score: 100,
					pay_user_id: this.allDetailInfo.user_id,
					lx: 24
				}).then(res => {
					if(res == 200) {
						this.getDetail()
						uni.hideLoading()
					}
					console.log('reds-----', res)
				})
			},
			getDetail() {
				uni.showLoading({
					title: '加载中'
				});
				this.$u.api.user.getProfessionalDetail({ id: this.allInfo.id }).then(res => {
					this.allDetailInfo = res
					this.userGroup()
					this.lookatZan()
					this.getIsGuanZhu()
					uni.hideLoading()
					console.log('res000000', res)
				})
			},
			callPhone() {
				this.content = '是否拨打电话给' + this.allInfo.user.mobile
				this.showTel = true
			},
			confirmTel() {
				uni.makePhoneCall({
					phoneNumber: this.allInfo.user.mobile || ''
				})
				this.showTel = false
			},
			successFun() {
				uni.navigateTo({
					url: '/pages/tabbar/newUser/Mall/mallSuccess'
				})
			},
			changeTitle(index) {
				if(index == 3) {
					this.watchComment()
				}
				this.current = index
			},
			// 查看评论
			watchComment() {
				uni.showLoading({
					title: '加载中'
				});
				this.$u.api.user.watchComment({
					release_id: this.allDetailInfo.id,
					member_id: uni.getStorageSync("user_id"),
					release_type: 'professional'
				}).then(res => {
					if (res.length == 0) {
						this.nomore = true
					} else {
						this.commontList = res.data
						console.log('66666666', this.commontList)
					}
					uni.hideLoading()
				})
			},
			sendComment(info) {
				uni.showLoading({
					title: '发送中'
				});
				this.$u.api.user.sendComment({
					release_id: this.allDetailInfo.id,
					member_id: uni.getStorageSync("user_id"),
					release_type: 'professional',
					content: info,
					type: this.typeKey || 1,
					one_comment_id: this.topId || this.itemInfo.id || 0,
					comment_id: this.itemInfo.id || 0
				}).then(res => {
					if(res == 200) {
						uni.showToast({
							title:'发布成功'
						})
					}
					this.replayFlag = false
					this.valueComment = ''
					this.watchComment()
					uni.hideLoading()
				})
			},
			replaySec(item, key, topId) {
				this.replayUser = item.member.username
				console.log('9990000', this.replayUser)
				this.itemInfo = item
				this.typeKey = key
				this.topId = topId
				this.replayFlag = true
			},
			delReply(delParams) {
				uni.showLoading({
					title: '删除中'
				});
				this.$u.api.user.delComment({
					id: delParams.id,
					member_id: uni.getStorageSync("user_id")
				}).then(res => {
					if(res == 200) {
						uni.showToast({
							title:'删除成功'
						})
					}
					this.watchComment()
					uni.hideLoading()
				})
				
			}
		}
	}
</script>

<style lang="less">
	page {
		// background-color: #F6F7FB;
	}
	.back {
		// position: absolute;
		width: 70rpx;
		height: 70rpx;
		// top: 50rpx;
	}
	.titleSty {
		color: #262728;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 600;
		// padding-top: 34rpx;
		margin-left: 14rpx;
	}
	.formSty {
		padding-bottom: 200rpx;
		/deep/ .u-form-item__body {
			padding: 0;
		}
	}
	.modalSty {
		text-align: center;
	}
	.contentBg {
		background-color: #fff;
		padding: 0 24rpx;
		// margin-left: 24rpx;
		// margin-right: 24rpx;
		border-radius: 18px;
		padding-bottom: 35rpx;
		/deep/ .u-form-item__body__right__message {
			margin-left: 0 !important;
		}
		/deep/ .u-icon__icon {
			font-size: 52rpx !important;
		}
		/deep/ .u-border-bottom{
			position: inherit;
		}
		/deep/ .u-add-wrap {
			// display: none !important;
			color: #D9D9D9;
			font-size: 20rpx;
		}
		/deep/ .u-add-tips {
			display: none !important;
		}
	}
	.boxSty {
		width: 100%;
		// height: 600rpx;
		// background-image: url('../../../../static/images/user/newUI/detsilIMage.png');
		// background-size: 100% 100%;
		// background-repeat: no-repeat;
		// position: relative;
		.operateBox {
			margin-right:30rpx;
		}
		.operateBg {
			width: 56rpx;
			height: 56rpx;
			background-color: #0E0E0E;
			opacity: 0.6;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.numberSty {
		color: #FF5A00;
		font-size: 48rpx;
		font-weight: 600;
		margin-top: 34rpx;
	}
	.transformSty {
		width: 122rpx;
		height: 46rpx;
		background-color: #F1F6FF;
		text-align: center;
		font-size: 26rpx;
		line-height: 46rpx;
		color: #7A929B;
		margin-top: 24rpx;
	}
	.replaySty {
		position: fixed;
		left:0;
		bottom: 120rpx;
		right: 0;
		color: #adadad;
		display: flex;
		justify-content: flex-start;
		z-index: 10;
		background-color: #DEE1EF;
	}
	.footer_btn4{
		position: fixed;
		height: 120rpx;
		left:0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		background: #fff;
		.inputSty {
			width: 30%;
			border-radius: 30rpx;
			background-color: #F6F6F6;
			text-indent: 20rpx;
			margin-left: 15rpx;
		}
	}
	.busiBox {
		width: 121rpx;
		height: 28rpx;
		margin-top: 14rpx;
		position: relative;
		.iconSty {
			position: absolute;
			left: 6rpx;
			top: 3rpx;
		}
	}
	.coverSty {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		// background-color: #C6D5D9;
		background-color: rgba(0, 0, 0, 0.7);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 2;
		.coverContent {
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			width: 80%;
			height: 68rpx;
			color: #fff;
			font-size: 26rpx;
			text-align: center;
			line-height: 68rpx;
			border-radius: 500rpx;
		}
	}
	.followBox {
		border: 1rpx solid #000;
		border-radius: 500rpx;
		// width: 134rpx;
		height: 52rpx;
		color: #333;
		font-size: 24rpx;
		font-weight: 600;
		text-align: center;
		line-height: 52rpx;
	}
	.callPhoneSty {
		background: linear-gradient(90deg, #FF7000 0%, #FFA245 100%);
		box-shadow: 0px 4px 13.8px 0px #DEE1EF;
		box-shadow: -2px -3px 9.9px 0px #FFBE7C inset;
		box-shadow: -4px 4px 6px 0px #FFCB9775 inset;
		width: 45%;
		height: 68rpx;
		line-height: 68rpx;
		font-size: 26rpx;
		font-weight: 600;
		color: #fff;
		text-align: center;
		border-radius: 500rpx;
	}
	.inlineBox {
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		box-shadow: 0px 4px 13.8px 0px #DEE1EF;
		box-shadow: -2px -6px 9.9px 0px #71D0FF inset;
		box-shadow: -4px 5px 6.5px 0px #C8FBFF75 inset;
		width: 45%;
		height: 68rpx;
		line-height: 68rpx;
		font-size: 26rpx;
		font-weight: 600;
		color: #fff;
		text-align: center;
		border-radius: 500rpx;
	}
	.commonTitle {
		font-size: 26rpx;
		color: #535353;
		height: 60rpx;
	}
	.commonTitle:first-child{
		margin-left: 0;
	}
	.activeTitle {
		font-size: 32rpx;
		color: #0E0E0E;
		font-weight: 600;
		border-bottom: 6rpx solid #278AFF;
	}
</style>
